<template>
  <nav>
    <ul>
      <li><router-link to="/JobList">职务信息</router-link></li>
      <li><router-link to="/job-search">职务搜索</router-link></li>
      <li><router-link to="/forum">论坛</router-link></li>
    </ul>
  </nav>
</template>

<script>
export default {

};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  background-color: #333;
  display: flex;
  justify-content: center; /* 使导航栏中的内容居中 */
}

nav ul {
  list-style: none;
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 使列表项居中 */
  width: 100%;
}

nav ul li {
  flex: 1; /* 使每个 li 平均分布导航栏宽度 */
  text-align: center;
}

nav ul li a {
  display: block;
  padding: 20px; /* 调整内边距以增加可点击区域 */
  text-decoration: none;
  color: #bdbdbd;
}

a.router-link-active {
  color: white;
  background-color: #2264bd;
}

nav ul li a:hover {
  color: white;
  background-color: #15427e;
}
</style>